<template>
  <div class="v-flow-config-section">
    <div class="config-section-title">设置审批人</div>
    <!-- 审批类型 -->
    <TypeSelector v-model="ruleForm.type" :typeArr="typeArr" />
    <!-- 3指定上级 审批人为发起人上几级 -->
    <div v-if="ruleForm.type === 3">
      <p class="form-title">审批人为发起人</p>
      <el-select v-model="ruleForm.level" placeholder="请选择">
        <el-option
          v-for="item in levelArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <!-- 4连续多级上级 指定审批终点 -->
    <div v-if="ruleForm.type === 4">
      <p class="form-title">指定终点 （将从申请人的直接上级依次审批到此上级为止）</p>
      <el-radio-group v-model="ruleForm.endType">
        <el-radio :label="1">指定角色</el-radio>
        <el-radio :label="2">指定层级</el-radio>
      </el-radio-group>
      <div v-if="ruleForm.endType === 2">
        <el-select v-model="ruleForm.level" placeholder="请选择">
          <el-option
            v-for="item in topLevelArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <!-- 表单控件中的人员选择器 -->
    <div v-if="ruleForm.type === 5">
      <el-select v-model="ruleForm.userInputId" placeholder="请选择人员选择器">
        <el-option
          v-for="item in userInputList"
          :key="item.key"
          :label="item.title"
          :value="item.key"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 选择成员/角色 -->
    <ActionersConfig
      v-if="toSelector"
      :actioners="ruleForm.actioners"
      @update:actioners="updateActioners"
    >
      <template #btn-text>{{ ruleForm.type === 1 ? '添加成员' : '添加角色' }}</template>
    </ActionersConfig>
    <!-- 审批人员可选择继续或完结流程  -->
    <div v-if="ruleForm.type != 7">
      <p class="form-title">审批人员可选择继续或完结流程</p>
      <el-radio-group v-model="form.canOver">
        <el-radio :label="1">否</el-radio>
        <el-radio :label="2">是</el-radio>
      </el-radio-group>
    </div>
    <!-- 会签/或签 -->
    <div
      v-if="
        ruleForm.type != 7 &&
        ruleForm.type != 4 &&
        (ruleForm.type != 1 || ruleForm.actioners.length > 1)
      "
    >
      <p class="form-title">{{ ruleForm.type === 1 ? '多人' : '多角色' }}审批时采用的审批方式</p>
      <el-radio-group v-model="form.approvalMethod">
        <el-radio :label="1">会签（需所有人审批了同意）</el-radio>
        <el-radio :label="2">或签（一名审批人同意即可）</el-radio>
      </el-radio-group>
    </div>
    <!-- 审批人为空时 -->
    <div v-if="ruleForm.type != 7 && ruleForm.type != 1">
      <p class="form-title">审批人为空时</p>
      <el-radio-group v-model="form.approvalNone">
        <el-radio :label="1">自动通过</el-radio>
        <el-radio :label="2">自动转交管理员</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { auditTypeArr, auditLevelArr, auditTopLevelArr } from '../dicts'
import type { Properties, Actioner } from '../../types'
const { getProperties, updateProperties } = inject<{
  getProperties: () => any
  updateProperties: (data: Properties) => void
}>('nodeConfig', {
  getProperties: () => {
    return {}
  },
  updateProperties: () => {}
})
const typeArr = ref(auditTypeArr)
const levelArr = ref(auditLevelArr)
const topLevelArr = ref(auditTopLevelArr)
const userInputList = ref([
  {
    key: '', // 表单项key
    title: '' // 表单项名称
  }
])
// 审批人
const ruleForm = ref({
  type: 1, // 审批类型
  level: 1, // 审批层级 | 连续多级上级时的最终审批级别
  endType: 2, // 审批终点类型 1指定角色 2指定层级
  userInputId: '', // 人员选择器ID
  actioners: [] as Actioner[] // 成员/角色列表
})
// 审批规则
const form = ref({
  approvalMethod: 1, // 审批方式 1会签 2或签
  approvalNone: 1, // 审批人为空时 1自动通过 2自动转交管理员
  canOver: 1 // 审批人可否选择继续或完结流程  1否 2是
})
const toSelector = computed(() => {
  if (
    ruleForm.value.type === 1 ||
    ruleForm.value.type === 2 ||
    (ruleForm.value.type === 4 && ruleForm.value.endType === 1) ||
    ruleForm.value.type === 6
  ) {
    return true
  } else {
    return false
  }
})
const updateActioners = (actioners: Actioner[]) => {
  ruleForm.value.actioners = actioners
}
watch(ruleForm, () => {
  const properties = getProperties()
  properties.actionerRules = [ruleForm.value]
  updateProperties(properties)
})
watch(form, () => {
  const properties = getProperties()
  properties.actionerRules = [ruleForm.value]
  properties.approvalMethod = form.value.approvalMethod
  properties.approvalNone = form.value.approvalNone
  properties.canOver = form.value.canOver
  updateProperties(properties)
})
onMounted(() => {
  const properties = getProperties()
  form.value = properties
  if (properties.actionerRules.length) {
    ruleForm.value = properties.actionerRules[0]
  }
})
</script>
